import React from 'react';
import { Row, Col, Form, Select, DatePicker, Input, Tabs, Button, Icon, Upload, Popconfirm,message} from 'antd';
const R = require('ramda');
import BizParams from '../../../components/commons/BizParams'
import CurrencySelect from '../../../components/commons/CurrencySelect'
import SingleUpload from '../../../components/commons/SingleUpload'
import moment from 'moment';
import Constants from "../../../utils/Constants";
moment.locale('zh-cn');
const dateFormatter = "YYYY-MM-DD";

const Dragger = Upload.Dragger;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const Option = Select.Option;
export default Form.create({wrappedComponentRef: true})(class Clearance extends React.Component {
	constructor(props) {
		super(props);
	}

	componentWillReceiveProps(nextProps) {
		if (!R.equals(this.props.dataSource)(nextProps.dataSource)) {
			this.handleResetFields();
		}
	}

	handleResetFields = () => {
		if(this.refs.copyItemUpload)this.refs.copyItemUpload.resetUpload();
		this.props.form.resetFields();
	}

	handleSubmit = () => {
		this.props.form.validateFields((errors, values) => {
			let orderTgApproval = R.isNil(this.props.orderTgApproval) ? {} : this.props.orderTgApproval;
			let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
			let form =  values;
			form.id = orderTgApproval.id;
			form.orderid = dataSource.id;
			form.endtime = R.isNil(values.endtime) ? values.endtime : values.endtime.format(dateFormatter);
			form.begintime = R.isNil(values.begintime) ? values.begintime : values.begintime.format(dateFormatter);
			form.exporttime = R.isNil(values.exporttime) ? values.exporttime : values.exporttime.format(dateFormatter);
			form.passtime = R.isNil(values.passtime) ? values.passtime : values.passtime.format(dateFormatter);
			form.finishtime = R.isNil(values.finishtime) ? values.finishtime : values.finishtime.format(dateFormatter);
			if(this.props.customer && this.props.customer.businessType != "2"){
				if(!R.isNil(form.finishtime) && R.isNil(form.finishtime)){
					message.error("结关前必须填写出口日期");
					return;
				}

				if(!form.passtime && form.finishtime){
					message.error("填写结关时间前必须填写放行时间！");
					return;
				}

			}

			if(!R.isNil(form.cstdeclarationno) && !R.isEmpty(form.cstdeclarationno) && form.cstdeclarationno.length != 18){
				message.error("报关单号必须是18位");
				return;
			}

			if(R.isNil(orderTgApproval.url) || R.isEmpty(orderTgApproval.url)){
				form.url = this.refs.copyItemUpload.getUrl();
			}
			this.props.dispatch({
				type: 'declareApproval/updateOrderTgApproval',
				payload: {
					orderTgApproval : form,
					searchConditions: this.props.searchConditions,
					onSuccess:()=>{
                        if(this.props.handleCancel){
                            this.props.handleCancel(["7"]);
                        }
					}
				}
			});
		});

	};

	render() {
		const { getFieldDecorator } = this.props.form;
		let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
		let orderTgApproval = R.isNil(this.props.orderTgApproval) ? {} : this.props.orderTgApproval;
		let formItemLayout = {
			labelCol: { xs: { span: 24 }, sm: { span: 6 } },
			wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
		};
		let displaySubmit = false;
		if(this.props.customer && this.props.customer.businessType === Constants.NUMBER_TWO){
			if(
				R.isNil(orderTgApproval.passtime) || R.isEmpty(orderTgApproval.passtime) ||
				R.isNil(orderTgApproval.cstdeclarationno) || R.isEmpty(orderTgApproval.cstdeclarationno) ||
				R.isNil(orderTgApproval.url) || R.isEmpty(orderTgApproval.url)
			) displaySubmit = true;
		}else{
			if(
				R.isNil(orderTgApproval.tger) || R.isEmpty(orderTgApproval.tger) ||
				R.isNil(orderTgApproval.endtime) || R.isEmpty(orderTgApproval.endtime) ||
				R.isNil(orderTgApproval.begintime) || R.isEmpty(orderTgApproval.begintime) ||
				R.isNil(orderTgApproval.exporttime) || R.isEmpty(orderTgApproval.exporttime) ||
				R.isNil(orderTgApproval.proxyno) || R.isEmpty(orderTgApproval.proxyno) ||
				// R.isNil(orderTgApproval.proxyrecovery) || R.isEmpty(orderTgApproval.proxyrecovery) ||
				R.isNil(orderTgApproval.passtime) || R.isEmpty(orderTgApproval.passtime) ||
				R.isNil(orderTgApproval.finishtime) || R.isEmpty(orderTgApproval.finishtime) ||
				R.isNil(orderTgApproval.cstdeclarationno) || R.isEmpty(orderTgApproval.cstdeclarationno) ||
				R.isNil(orderTgApproval.url) || R.isEmpty(orderTgApproval.url)
			) displaySubmit = true;
		}
		return (
			<div>
				<Form>
					{this.props.customer && this.props.customer.businessType != "2" ?
						<Tabs tabPosition={'top'}>
							<TabPane tab="基本信息" key="1">
								<Row>
									<Col span={12}>
										<FormItem {...formItemLayout} label="委托单号">
											<span>{dataSource.orderno}</span>
										</FormItem>
									</Col>
								</Row>
								<Row>
									<Col span={12}>
										<FormItem {...formItemLayout} label="通关专员" hasFeedback>
											{getFieldDecorator('tger', {
												rules: [{
													required: true, message: '通关专员为必填项'
												}],
												initialValue: (R.isNil(orderTgApproval.tger) || R.isEmpty(orderTgApproval.tger)) ? undefined : orderTgApproval.tger + ""
											})(
												<Select
													disabled={this.props.disabled || !(R.isNil(orderTgApproval.tger) || R.isEmpty(orderTgApproval.tger))}
													style={{width: '100%'}} showSearch placeholder="可通过输入关键字搜索"
													filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
													{
														!R.isNil(this.props.tgManagerList) && !R.isEmpty(this.props.tgManagerList) ? this.props.tgManagerList.map(item => {
															return (<Select.Option value={item.userId + ""}
																				   key={item.userId + ""}>{item.username}</Select.Option>);
														}) : ''
													}
												</Select>
											)}
										</FormItem>
									</Col>
									<Col span={12}>
										<FormItem {...formItemLayout} label="截关时间" hasFeedback>
											{getFieldDecorator('endtime', {
												rules: [{
													required: true, message: '截关时间为必填项'
												}],
												initialValue: (R.isNil(orderTgApproval.endtime) || R.isEmpty(orderTgApproval.endtime)) ? undefined : moment(orderTgApproval.endtime, dateFormatter)
											})(
												<DatePicker disabled={this.props.disabled || !(R.isNil(orderTgApproval.endtime) || R.isEmpty(orderTgApproval.endtime))}/>
											)}
										</FormItem>
									</Col>
								</Row>
								<Row>
									<Col span={12}>
										<FormItem {...formItemLayout} label="申报日期" hasFeedback>
											{getFieldDecorator('begintime', {
												rules: [{
													required: true, message: '申报日期为必填项'
												}],
												initialValue: (R.isNil(orderTgApproval.begintime) || R.isEmpty(orderTgApproval.begintime)) ? undefined : moment(orderTgApproval.begintime, dateFormatter)
											})(
												<DatePicker disabled={this.props.disabled || !(R.isNil(orderTgApproval.begintime) || R.isEmpty(orderTgApproval.begintime))}/>
											)}
										</FormItem>
									</Col>
									<Col span={12}>
										<FormItem {...formItemLayout} label="出口日期" hasFeedback>
											{getFieldDecorator('exporttime', {
												rules: [{
													required: true, message: '出口日期为必填项'
												}],
												initialValue: (R.isNil(orderTgApproval.exporttime) || R.isEmpty(orderTgApproval.exporttime)) ? undefined : moment(orderTgApproval.exporttime, dateFormatter)
											})(
												<DatePicker disabled={this.props.disabled || !(R.isNil(orderTgApproval.exporttime) || R.isEmpty(orderTgApproval.exporttime))}/>
											)}
										</FormItem>
									</Col>
								</Row>
							</TabPane>
						</Tabs>
						: ""}
					{this.props.customer && this.props.customer.businessType != "2" ?
						<Tabs tabPosition={'top'}>
							<TabPane tab="报关委托书" key="1">
								<Row>
									<Col span={12}>
										<FormItem {...formItemLayout} label="委托书号码" hasFeedback>
											{getFieldDecorator('proxyno', {
												rules: [{
													required: true, message: '委托书号码为必填项'
												}],
												initialValue: orderTgApproval.proxyno
											})(
												<Input disabled={this.props.disabled || !(R.isNil(orderTgApproval.proxyno) || R.isEmpty(orderTgApproval.proxyno))}
													maxLength="20"/>
											)}
										</FormItem>
									</Col>
									{/* <Col span={12}>
									<FormItem {...formItemLayout} label="委托书回收" hasFeedback>
										{getFieldDecorator('proxyrecovery', {
												rules: [{
													required: true, message: '委托书回收为必填项'
												}],
												initialValue: R.isNil(orderTgApproval.proxyrecovery) ? undefined : orderTgApproval.proxyrecovery+""
											})(
												<Select disabled={this.props.disabled || !(R.isNil(orderTgApproval.proxyrecovery) || R.isEmpty(orderTgApproval.proxyrecovery))} style={{width: '100%'}}>
													<Option value="1" key="1">号码相符</Option>
													<Option value="2" key="2">号码不相符</Option>
												</Select>
											)}
									</FormItem>
								</Col>
							</Row>
							<Row> */}
									<Col span={12}>
										<FormItem {...formItemLayout} label="备注" hasFeedback>
											{getFieldDecorator('memo', {
												initialValue: orderTgApproval.memo
											})(
												<Input.TextArea disabled={this.props.disabled || !(R.isNil(orderTgApproval.memo) || R.isEmpty(orderTgApproval.memo)) || !displaySubmit}
													maxLength="100" autosize={true}/>
											)}
										</FormItem>
									</Col>
								</Row>
							</TabPane>
						</Tabs>
						:""}
					<Tabs tabPosition={'top'}>
						<TabPane tab="输出信息" key="1">
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="报关单号" hasFeedback>
										{getFieldDecorator('cstdeclarationno', {
											rules: [{
												required: true, message: '报关单号为必填项',
												len: 18, message: '报关单号必须是18位'
											}],
											initialValue: orderTgApproval.cstdeclarationno
										})(
											<Input disabled={this.props.disabled || !(R.isNil(orderTgApproval.cstdeclarationno) || R.isEmpty(orderTgApproval.cstdeclarationno))} maxLength="18"/>
										)}
									</FormItem>
								</Col>
								<Col span={12}>
									<span style={{color: '#f04134', marginRight: 4, fontFamily: 'SimSun', lineHeight: 1, fontSize: 12}}>*</span>
									<SingleUpload url={orderTgApproval.url} disabled={this.props.disabled || !(R.isNil(orderTgApproval.url) || R.isEmpty(orderTgApproval.url))} text="上传报关单复印件" ref={"copyItemUpload"} dataSource={dataSource}/>
								</Col>
							</Row>
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="放行时间" hasFeedback>
										{getFieldDecorator('passtime', {
											rules: [{
												required: true, message: '放行时间为必填项'
											}],
											initialValue: (R.isNil(orderTgApproval.passtime) || R.isEmpty(orderTgApproval.passtime)) ? undefined : moment(orderTgApproval.passtime, dateFormatter)
										})(
											<DatePicker disabled={this.props.disabled || !(R.isNil(orderTgApproval.passtime) || R.isEmpty(orderTgApproval.passtime))}/>
										)}
									</FormItem>
								</Col>
								{this.props.customer && this.props.customer.businessType != "2" ?
									<Col span={12}>
										<FormItem {...formItemLayout} label="结关时间" hasFeedback>
											{getFieldDecorator('finishtime', {
												rules: [{
													required: true, message: '结关时间为必填项'
												}],
												initialValue: (R.isNil(orderTgApproval.finishtime) || R.isEmpty(orderTgApproval.finishtime)) ? undefined : moment(orderTgApproval.finishtime, dateFormatter)
											})(
												<DatePicker
													disabled={this.props.disabled || !(R.isNil(orderTgApproval.finishtime) || R.isEmpty(orderTgApproval.finishtime))}/>
											)}
										</FormItem>
									</Col>
								:""}
							</Row>
							{this.props.customer && this.props.customer.businessType != "2" ?
								<Row>
									<Col span={12}>
										<FormItem {...formItemLayout} label="报关提运单号" hasFeedback>
											{getFieldDecorator('tyno', {
												initialValue: orderTgApproval.tyno
											})(
												<Input disabled={this.props.disabled || !(R.isNil(orderTgApproval.tyno) || R.isEmpty(orderTgApproval.tyno)) || !displaySubmit}
													maxLength="20"/>
											)}
										</FormItem>
									</Col>
									<Col span={12}>
										<FormItem {...formItemLayout} label="快递单号" hasFeedback>
											{getFieldDecorator('expressno', {
												initialValue: orderTgApproval.expressno
											})(
												<Input disabled={this.props.disabled || !(R.isNil(orderTgApproval.expressno) || R.isEmpty(orderTgApproval.expressno)) || !displaySubmit}
													maxLength="20"/>
											)}
										</FormItem>
									</Col>
								</Row>
								:""}
						</TabPane>
					</Tabs>
				</Form>
				<div style={{float: 'right'}}>
					<Popconfirm  onConfirm={this.handleSubmit.bind(this)} okText="是" cancelText="否" placement="leftTop" title={'请注意！已填写的通关信息提交之后不能再次修改，未填写的则可以下次再提交，必填项都填写之后将屏蔽提交按钮，请确认信息是否填写正确?'}
					>
						<Button style={{display: displaySubmit && dataSource.status === '6' ? 'inline-block' : 'none'}} disabled={this.props.disabled} type="primary" key="submit" size="large" icon="check">提交</Button>
					</Popconfirm>
				</div>
				<div style={{display: !displaySubmit && dataSource.status === '6' ? 'block' : 'none', color: 'red', textAlign: 'center'}}>通关信息已补充完整, 请及时确认费用申报完毕以继续流程</div>
			</div>
		)
	}
})